<template>
  <el-drawer
      v-model="showSettingPanelFlag"
      size="30%"
      :show-close="true">
    <SetterCard title="设置名称">
      <SetterItem label="节点名称">
        <el-input v-model="value" @input="handleInput"></el-input>
      </SetterItem>
    </SetterCard>
  </el-drawer>
</template>
<script setup>
import {onMounted} from 'vue';
import {EDITOR_EVENT} from "@/components/logic-editor/constant";
import SetterCard from "@/components/logic-editor/node-setting-panel/componets/setter-card/index.vue";
import SetterItem from "@/components/logic-editor/node-setting-panel/componets/setter-item/index.vue";
import {registerEvent} from "@/components/logic-editor/node-setting-panel/useRegisterEvent";

defineOptions({
  name: 'NodeSettingPanel'
})
const props = defineProps({
  graphModel: Object
})
//右侧设置面板
const showSettingPanelFlag = ref(false)
const value = ref()

const handleInput = (value) => {
  console.log('handleInput', props.graphModel.nodes[0])
  props.graphModel.nodes[0].setProperties({name: value})
}

const initEvent = () => {
  const eventMap = new Map()
  eventMap.set(EDITOR_EVENT.LOGIC_NODE_MOUSE_UP, () => {
    showSettingPanelFlag.value = true
  })
  eventMap.set(EDITOR_EVENT.SYS_BLANK_CLICK, () => {
    showSettingPanelFlag.value = false;
  })
  registerEvent(props.graphModel, eventMap)
}

initEvent()
onMounted(() => {
  console.log(111);
})


</script>

<style scoped>

</style>
